<template>
	<view class="feedbackdetail">
		<view class="">
			<view class="title">
				{{backtitledata}}
			</view>
			<myline></myline>
		</view>
		<view class="situation">
			<uni-easyinput type="textarea" autoHeight v-model="situation" placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助"></uni-easyinput>

			<myline>
			</myline>
		</view>
		<view class="">
			<view style="margin-bottom: 10rpx;">
				最多({{tempFiles.length}}/4张图片)
			</view>
			<view class="imgbox" >
				<view v-for="(item,index) in tempFiles" class="imgboxitem">
					<image :src="'https://zyc618.mynatapp.cc/'+item"  style="width: 200rpx;height: 200rpx;" @tap="previewImg(index)" ></image>
					<view class="rubbishbox" @tap="removeImg(index)" >
						<image class="rubbish" src="@/static/tabBar/rubbish.png" mode=""></image>
					</view>
				</view>
				<view v-if="tempFiles.length <4">
					<image style="width: 200rpx;height: 200rpx;" src="../../static/tabBar/index/add.png" mode="" @tap="textupload"></image>
				</view>
			</view>
		</view>
		<view class="telall">
			<view class="tel">
				联系方式
			</view>
			<view class="telcontent">
				<uni-easyinput  trim="all" v-model="tel" ></uni-easyinput>
			</view>
		</view>
		<myline></myline>
		<view class="radioall">
			<uni-data-checkbox selectedColor="#4ccfff" multiple v-model="checkbox5" :localdata="hobby2">
			</uni-data-checkbox>
		
		</view>
		<button @tap="sendmydb"> 提交反馈</button>
	</view>
</template>


<script>
	import myline from '@/components/common/Lines.vue'
	import $http from '@/common/api/request.js'
	import {mapMutations,mapState} from 'vuex'
	export default {
		props: {
			backtitledata: {
				type: String,
				default: "",

			},
			backtheid:{
				type:Number,
				default:0,
			},
			basesort:{
				type:String,
				default:"",
			}
		},
		data() {
			return {
				tempFiles: [],
				baseurl:"https://zyc618.mynatapp.cc",
				submitform: {
					situation: "",//根据反馈内容
					photolist:[],//根据tempFiles
					tel:"",//联系方式
					backtheid:0,
					basesort:"",
				},
				tel:"",//校验属性
				situation:"",//校验属性
				timer:null,
				checkbox5:[],
				hobby2: [{
					text: '允许开发者在48小时内联系我',
					value: 1,
				},{
					text: '不同意',
					value: 0,
					disable:true
				},],
				rules: {
					'tel': {
						rule: /^1[3456789]\d{9}$|^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/,
						msg: "格式错误"
					},
					situation:{
						rule: /^.{10,}$/,
						msg: "请填写10个字以上的问题描述以便我们提供更好的帮助"
					},
				}
			}
		},
		components: {
			myline
		},
		methods: {
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					uni.showToast({
						title: this.rules[key].msg,
						icon: "none"
					})
					bool = false;
					return bool;
				}
				return bool;
			},
			sendmydb(){
				if(!this.validate('tel')){
					return
				}
				if(!this.validate('situation')){
					return
				}
				if(this.checkbox5[0] == 1){
					this.submitform.situation = this.situation;//反馈内容;
					this.submitform.photolist = this.tempFiles;//文件名字
					this.submitform.tel = this.tel;//电话号码
					this.submitform.basesort = this.basesort;
					this.submitform.backtheid = this.backtheid;
					$http.request({
						url: "/finishfeed",
						method:"POST",
						header: {
							token: true
						},
						data:{
							submitform:this.submitform
						}
					}).then((res) => {
						this.resetObjectToDefault(this.submitform);
						this.situation = "";
						this.tel="";
						this.tempFiles = [];
						this.checkbox5 = []
					}).catch(() => {
					})
				}else{
					uni.showToast({
						title:"请勾选协议",
						icon:"none"
					})
				}
				
			},
			//上传图片命名日期
			formattedDate() {
				  const rawDate = new Date();
			      const year = rawDate.getFullYear();
			      const month = (rawDate.getMonth() + 1).toString().padStart(2, '0');
			      const day = rawDate.getDate().toString().padStart(2, '0');
			      return `${year}${month}${day}`;
			},
			//图片上传服务器
			textupload(){
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						for(var i =0;i<tempFilePaths.length;i++){
							const uploadTask = uni.uploadFile({
								url: this.baseurl+'/api/files/upload', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
									url: this.formattedDate(),
									pathname:this.userInfo.id + Date.now()
								},
								success: (uploadFileRes) => {
									// console.log(uploadFileRes);
									let imgdatalist =JSON.parse(uploadFileRes.data)
									console.log(imgdatalist);
									if(imgdatalist.data.code == 200){
										this.tempFiles.push(imgdatalist.data.url);
									}
								}
							});
						}
					}
				});
			},
			resetObjectToDefault(obj) {
			  for (const key in obj) {
				if (obj.hasOwnProperty(key)) {
				  obj[key] = this.getDefaultForProperty(key);
				}
			  }
			},
			getDefaultForProperty(propertyName) {
			  // 在这里根据属性名称返回默认值
			  // 你可以根据需要返回不同的默认值
			  switch (propertyName) {
			    case "situation":
			      return "";
			    case "photolist":
			      return [];
			    case "tel":
			      return "";
			    case "backtheid":
			      return 0;
			    case "basesort":
			      return "";
			    default:
			      return undefined; // 如果没有默认值，可以返回undefined或其他适当的值
			  }
			},
			// 预览图片
			previewImg(index) {
				let imgUrl = this.tempFiles.map(item =>this.baseurl+ item);
				uni.previewImage({
					current: index, //点击的索引值
					urls: imgUrl,
				})
			},
			// 删除图片
			removeImg(index) {
				this.tempFiles.splice(index, 1)
			},
		},
		//计算属性:
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
	}
</script>

<style lang="scss">
	.upload {
		position: absolute;
		top: -50rpx;
		right: 20rpx;
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #04c062;
		color: white;
		border-radius: 10rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.content {
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;

		.files {
			width: 200rpx;
			height: 200rpx;
			background-color: #f7f7f7;
			color: #6d6d6d;
			font-size: 100rpx;
			font-weight: 100;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10rpx;
		}

		.images {
			width: 200rpx;
			height: 200rpx;
			margin: 10rpx;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}

			.remove {
				width: 50rpx;
				height: 50rpx;
				background-color: #f7f7f7;
				position: absolute;
				top: -5rpx;
				right: -10rpx;
				text-align: center;
				opacity: .5;
				border-radius: 0 0 0 50rpx;
				color: #c5c5c5;
			}
		}
	}

	.feedbackdetail {
		padding: 20rpx 40rpx;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			padding: 10rpx 0rpx;
			margin-bottom: 20rpx;
		}

		.situation {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			font-size: 30rpx;
			padding: 20rpx 0;

		}

		.sit-text {
			width: 100%;

		}
		.imgbox{
			// height: 400rpx;
			display: flex;
			align-items: center;
			flex: 1;
			flex-wrap: wrap;
			.imgboxitem{
				position: relative;
				
				.rubbishbox{
					position: absolute;
					right: 0%;
					top: 1%;
					
					.rubbish{
						width: 45rpx;
						height: 45rpx;
					}
				}
			}
			
		}
		.telall {
			display: flex;
			// padding: 10rpx 0;
			line-height: 30rpx;
			display: flex;
			align-items: center;
			.tel {
				width: 20%;
				line-height: 30rpx;
			}

			.telcontent {
				width: 70%;
			}
		}

		.radioall {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 20rpx;
			width: 85%;

			.radio {}

			.radiocontent {
				color: #c5c5c5;
				font-size: 24rpx;
			}
		}
	}
</style>